<template>
  <div>
    <el-dialog title="栏目设置"
               v-loading="loading"
               :key="key"
               :close-on-click-modal="false"
               custom-class="default-set-dialog" :visible.sync="visible" id="dialogBox">
      <el-form ref="form" :model="editFrom" label-width="120px">
        <el-form-item label="类型：">
          <el-radio-group v-model="editFrom.type" @change="handleTypeChange">
            <el-radio label="image">图片</el-radio>
            <el-radio label="video">视频</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="(editFrom.type==='image'?'图片':'视频')+'上传：'">
          <div class="edit-video-list">
            <template v-for="(video,index) in dataList">
              <template v-if="editFrom.type==='image'">
                <div class="edit-item" v-if="video.is_delete==='0'" :key="index+'right-img'">
                  <img :src="video.url">
                  <div class="edit-item-action">
                    <el-button type="primary" icon="el-icon-edit" @click="handleEdit(video,index)" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="handleDel(video)" circle></el-button>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="edit-item" v-if="video.is_delete==='0'" :key="index+'right-img'">
                  <img :src="video.video_image">
                  <div class="edit-item-action">
                    <el-button type="primary" icon="el-icon-edit" @click="handleEdit(video,index)" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="handleDel(video)" circle></el-button>
                  </div>
                </div>
              </template>
            </template>

            <div class="edit-video-upload" @click="handleAdd">
              <i class="iconfont icon-add-select"></i>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="轮播时间：" v-if="editFrom.type==='image'">
          <el-input-number v-model="editFrom.time"></el-input-number>
          <span class="ml10">秒</span>
        </el-form-item>
        <el-form-item :label="'启用'+(editFrom.type==='0'?'图片':'视频')+':'">
          <el-switch v-model="editFrom.is_show" active-value="1" inactive-value="0"></el-switch>
          <span class="desc ml10">开启后会自动切换展示上传内容</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="visible = false">取消</el-button>
        <el-button type="text" @click='submit()'>保存</el-button>
      </span>
    </el-dialog>
    <UploadVideoDialog ref="uploadVideoDialogRef" @save="handleSave"></UploadVideoDialog>
  </div>
</template>

<script>
import UploadVideoDialog from './UploadVideoDialog'
import {baseRequest} from "@/utils/http/request";
import {setDefaultScreen} from "@/utils/brower";

export default {
  name: "DefaultSetDialog",
  components: {
    UploadVideoDialog
  },
  data() {
    return {
      loading: false,
      key: Math.random() * 100,
      editIndex: -1,
      visible: false,
      dataList: [],
      editFrom: {
        // '0'图片 ‘1’视频
        type: 'image',
        // 轮播
        time: 0,
        // 是否开启
        is_show: '0'
      }
    }
  },
  methods: {
    handleTypeChange() {
      this.dataList.forEach(item => item.is_delete = '1')

    },
    handleEdit(info, index) {
      this.editIndex = index
      if (this.editFrom.type === 'image') {
        this.$refs.uploadVideoDialogRef.openDialog({
          imgURL: info.url
        }, this.editFrom.type)
      } else {
        this.$refs.uploadVideoDialogRef.openDialog({
          imgURL: info.video_image,
          VideoURL: info.url
        }, this.editFrom.type)
      }

    },
    handleSave(info) {
      if (this.editIndex > -1) {
        this.dataList[this.editIndex].url = info.imgURL
      } else {
        if (this.editFrom.type === 'image') {
          this.dataList.push({id: '', is_delete: '0', url: info.imgURL, video_image: ''})
        } else {
          // 视频
          this.dataList.push({id: '', is_delete: '0', video_image: info.imgURL, url: info.VideoURL})
        }
      }

    },
    handleAdd() {
      this.editIndex = -1
      this.$refs.uploadVideoDialogRef.openDialog(null, this.editFrom.type)
    },
    handleDel(info) {
      info.is_delete = '1'
    },
    submit() {
      this.loading = true
      baseRequest.screensaverEdit({...this.editFrom, datalist: this.dataList}).then(res => {
        const {code, msg} = res
        if (code === '01') {
          this.$message.success('保存成功')
          this.visible = false
          this.$store.commit('SET_SCREENSAVER', this.editFrom.is_show === '1')
          setDefaultScreen(this.editFrom.is_show)
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {
      }).finally(() => {
        this.loading = false
      })
    },
    openDialog() {
      this.visible = true
      this.getData()
    },
    getData() {
      this.loading = true
      baseRequest.screensaverGet().then(res => {
        const {image_datalist, video_datalist, time} = res
        if (res.code === '01') {
          this.editFrom.is_show = res.is_show
          this.editFrom.time = time
          if (video_datalist && video_datalist.length > 0) {
            this.editFrom.type = 'video'
            this.dataList = video_datalist.map(item => {
              return {...item, is_delete: '0'}
            })
          } else {
            this.editFrom.type = 'image'
            this.dataList = image_datalist.map(item => {
              return {...item, is_delete: '0', video_image: ''}
            })
          }
        }
      }).catch(() => {
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss">
@import "../../../assets/style/base";

.default-set-dialog {
  .desc {
    color: $color-black-400;
  }

  .edit-video-list {
    width: 100%;
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    $video-height: 10rem;

    .edit-item {
      display: inline-block;
      width: 16rem;
      height: $video-height;
      margin-right: $spacing-base;
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      margin-bottom: 2rem;

      .edit-item-title {
        height: 2rem;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: $color-alpha-black-80;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
      }

      &:hover {
        .edit-item-action {
          display: flex;
        }
      }

      .edit-item-action {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: $color-alpha-black-80;
        display: none;
        align-items: center;
        justify-content: center;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .edit-video-upload {
      width: 16rem;
      height: $video-height;
      border: 1px dashed $color-black-400;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      margin-right: $spacing-base;

      i {
        font-size: 3rem;
        color: $color-black-400;
      }

      &:hover {
        border: 1px dashed $color-info-500;

        i {
          font-size: 3rem;
          color: $color-info-500;
        }
      }
    }
  }
}
</style>
